import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast, Image } from 'antd-mobile'
import { BellOutline, AppOutline } from 'antd-mobile-icons'
import { Badge } from 'antd-mobile'
import style from '../index/index.module.css'
import Swiperch from '../../compoents/Swiperch/index'
import { Button, SearchBar, Card } from 'antd-mobile'
import request from '../../api/request'
import { useNavigate } from 'react-router-dom'
import { FloatingBubble } from 'antd-mobile'
import { MessageFill, HeartFill } from 'antd-mobile-icons'
import Hoc_login from '../../utils/Hoc_login'
function Index() {
  const navigate = useNavigate()
  const [lielist, setLielist] = useState([]);
  const FeachList = async () => {
    const res = await request.get('/api/list');
    console.log(res);
    if (res.code === 200) {
      setLielist(res.data)
    }
  }

  useEffect(() => {
    FeachList()
  }, [])


  const [collect, setCollect] = useState(
    JSON.parse(localStorage.getItem('collect')) || []
  )


  const handShouc = () => {
    const status = collect.some((item) => item.id === collect.id)
    if (status) {
      setCollect(collect.filter((item) => item.id !== collect.id))
    }
    else {
      setCollect([...collect, collect])
    }
  }

  const goYuding=(item)=>{
    navigate('/class',{state:item})
  }
  return (
    <div>
      <div className={style.head}>
        <NavBar right={
          <div className={style.right}>
            <Badge content={Badge.dot}>
              <BellOutline fontSize={20} />
            </Badge>

            <img style={{ width: '40px', height: '40px', borderRadius: '50%', marginLeft: '10px' }} src="https://img2.baidu.com/it/u=8013311,3592244460&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=617" alt="" />
          </div>
        } backIcon={false}> <span style={{ float: 'left', marginRight: '90px', color: "#fff" }}>订票服务</span></NavBar>

        <Swiperch ></Swiperch>

        <SearchBar className={style.sear} placeholder='请输入内容' onFocus={() => navigate('/search')} />
      </div>

      <Card title="最新活动" extra={<span style={{ color: '#6a6cdeff' }} ><span onClick={() => navigate('/list')}>查看全部</span></span>}>
        <div className={style.wrop}>
          <div className={style.wrops}>
            {lielist.length > 0 && lielist.map((item, index) => (
              <div key={index} className={style.itemimg} onClick={()=>goYuding(item)}>
                <div className={style.itimg}>
                  <Image style={{ width: '250px', height: '200px', borderRadius: '15px' }} src={item.image}>  </Image>
                  <div className={style.mestit}>
                    <h5>电音音乐节</h5>

                    <div className={style.girds}>
                      <Image className={style.littleimg} src={item.image}></Image>
                      <dd style={{ marginRight: '120px' }}>{item.title}</dd>
                      <dd className={style.priceed}>{item.price}</dd>

                    </div>

                    <div className={style.two}>
                      <dd>182参与者</dd>
                      <dd className={style.indextime}>{item.date}</dd>
                    </div>
                  </div>


                  <span className={style.like}>音乐会</span>
                  <span onClick={() => { handShouc() }} className={style.like2}> <HeartFill fontSize={17} color={collect ? 'blue' : 'red'} /> </span>


                </div>

              </div>
            ))}
          </div>
        </div>
      </Card>

      <div
        style={{
          textAlign: 'center',
          padding: '50vh 32px 0',
        }}
      >
        <FloatingBubble
          onClick={() => navigate('/map')}
          axis='xy'
          magnetic='x'
          style={{
            '--initial-position-bottom': '24px',
            '--initial-position-right': '24px',
            '--edge-distance': '24px',
          }}
        >
          <MessageFill fontSize={32} />
        </FloatingBubble>
      </div>


    </div>
  )
}

export default   Hoc_login (Index)
 